<template>
  <draggable
    :list="list"
    animation="300"
    :options="{
      group: { name: 'site' },
    }"
    class="draggable"
    ghostClass="ghost"
  >
    <el-col
      v-for="(params, index) in list"
      :span="params['__config__'].span"
      :key="index"
      @click.native.stop="changeComponent(params)"
      class="render-col"
      style="position: relative"
    >
      <div class="tools-div" :class="{ vis: params.id === component.id }">
        <el-button
          type="info"
          icon="el-icon-folder-add"
          circle
          @click.stop="save(params)"
          v-if="params['__componentName__'] === 'htmlComponent'"
        ></el-button>
        <el-button
          type="info"
          icon="el-icon-document-copy"
          circle
          @click.stop="copy(params)"
        ></el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          circle
          @click.stop="remove(params)"
        ></el-button>
      </div>
      <site-component
        :params="params"
        :activeId="component.id"
        @copy="copy"
        @remove="remove"
        @changeComponent="changeComponent"
      ></site-component>

      <!-- <render-component
              :params="params"
              :activeId="component.id"
            ></render-component> -->
    </el-col>
  </draggable>
</template>
<script>
import { createNamespacedHelpers, mapGetters } from "vuex";
import siteComponent from "@/components/render/site";
const { mapMutations } = createNamespacedHelpers("view");
import draggable from "vuedraggable";
import common from "./common";
export default {
  mixins: [common],
  provide() {
    return {
      ancestors: this,
    };
  },
  components: {
    siteComponent,
    draggable,
  },
  computed: {
    ...mapGetters(["componentsList", "component"]),
    list: {
      get() {
        return this.componentsList;
      },
      set(val) {
        this.updateComponentsList(val);
      },
    },
  },
  methods: {
    ...mapMutations({
      setComponentsList: "SET_COMPONENTS_LIST",
      setComponent: "SET_COMPONENT",
      removeComponentsList: "REMOVE_COMPONENTS_LIST",
      changeComponent: "CHANGE_COMPONENT",
      updateComponentsList: "UPDATE_COMPONENTS_LIST",
      saveHtmlComponent: "SAVE_HTMLCOMPONENT",
    }),
  },
};
</script>

<style lang="scss" scoped>
.draggable {
  height: 100%;
  &::before {
    content: "";
    display: block;
    height: 20px;
  }
  &::after {
    clear: both;
  }
  > .el-row {
    border: none !important;
    min-height: 0 !important;
  }
}
</style>